<!DOCTYPE html>
<meta charset="utf-8">
<title>JsBridge Test HTML</title>

<script src="https://cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
<script>eruda.init();</script>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script type="module" src="./JSBridge.js">
</script>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */




</style>
<body>
<hr>
<h3>-skJsBridgeV2-test-cases-</h3>
<div id="common_result" style="word-break:break-all">

</div>
<div style="word-break:break-all">
    <button id="registerHandler" class="button button1">registerHandler</button>
    <button id="test_toast" class="button button1">test_toast</button>
    <button id="test_getAppToken" class="button button1">test_getAppToken</button>
    <button id="test_tryBack" class="button button1">test_tryBack</button>
    <button id="test_showLoadingAnim" class="button button1">test_showLoadingAnim</button>
    <button id="test_hideLoadingAnim" class="button button1">test_hideLoadingAnim</button>
    <button id="test_showTitleBar" class="button button1">test_showTitleBar</button>
    <button id="test_hideTitleBar" class="button button1">test_hideTitleBar</button>
    <button id="test_share_good" class="button button1">test_shareGood</button>
    <button id="test_share_bad" class="button button1">test_shareBad</button>
    <button id="test_getAccountInfo" class="button button1">test_getAccountInfo</button>
    <button id="test_clearCache" class="button button1">test_clearCache</button>
    <button id="test_clearLocalStorage" class="button button1">test_clearLocalStorage</button>
    <button id="test_clearCacheAndLocalStorage" class="button button1">
        test_clearCacheAndLocalStorage
    </button>
    <button id="test_collectProductListV2" class="button button1">
        test_collectProductListV2（收藏商品或者标品）
    </button>
    <button id="test_cancelCollectProductListV2" class="button button1">
        test_cancelCollectProductListV2（取消收藏商品或者标品）
    </button>
</div>
<div style="word-break:break-all;background-color:#4CAF50;">
    <select id="test_toAppNamed_target" class="button button2">
        <option value="/product_web_link?type=1&id=20760976a72b88e5a4e29779d7b5dc06&url=https://api.pricerunner.com/gotostore/v1/partner/UK/b7a75c8ea33e17dea1641f7cab84f4b9/klapp_guang?productId=3200951441&storeId=8_317925628598157312&subOrNot=1&collected=0&showSimilar=0&spmCnt=s0.c5.10026.10086.d9383892-4f86-4c76-acd8-7a3b32489abf">/product_web_link</option>
        <option value="/add_bank_account">/add_bank_account</option>
        <option value="/add_bank_account_form">/add_bank_account_form</option>
        <option value="/creator_apply_access">/creator_apply_access</option>
        <option value="/search_country_page">/search_country_page</option>
        <option value="/creator_under_review">/creator_under_review</option>
        <option value="/creator_academy_detail">/creator_academy_detail</option>
        <option value="/creator_center_page">/creator_center_page</option>
        <option value="/creator_academy_page">/creator_academy_page</option>
        <option value="/creator_invite_friends_page">/creator_invite_friends_page</option>
        <option value="/creator_balance_upcoming_page">/creator_balance_upcoming_page</option>
        <option value="/creator_balance_paid_page">/creator_balance_paid_page</option>
        <option value="/creator_balance_history_page">/creator_balance_history_page</option>
        <option value="/creator_verify_email_page">/creator_verify_email_page</option>
        <option value="/creator_balance_sec_page">/creator_balance_sec_page</option>
        <option value="/creator_institute_of_talent_page">/creator_institute_of_talent_page</option>
        <option value="/creator_grow_up_plan_page">/creator_grow_up_plan_page</option>
        <option value="/h5">/h5</option>
        <option value="/home">/home</option>
        <option value="/objective_mine_account">/objective_mine_account</option>
        <option value="/own_mine_account">/own_mine_account</option>
        <option value="/img_2_create_wish_list">/img_2_create_wish_list</option>
        <option value="/publish_album">/publish_album</option>
        <option value="/draft">/draft</option>
        <option value="/recommend_similar_products">/recommend_similar_products</option>
        <option value="/img_search_2_wish_list">/img_search_2_wish_list</option>
        <option value="/imgSearchRoute2">/imgSearchRoute2</option>
        <option value="/camera">/camera</option>
        <option value="/barcode_search">/barcode_search</option>
        <option value="/recommend_outer_detail">/recommend_outer_detail</option>
        <option value="/search">/search</option>
        <option value="/account_modify_user_name">/account_modify_user_name</option>
        <option value="/account_profile_edit">/account_profile_edit</option>
        <option value="/account_my_message">/account_my_message</option>
        <option value="/account_activity_message">/account_activity_message</option>
        <option value="/account_system_message">/account_system_message</option>
        <option value="/account_message_like">/account_message_like</option>
        <option value="/account_message_follow">/account_message_follow</option>
        <option value="/recommend_good_set">/recommend_good_set</option>
        <option value="/user_login">/user_login</option>
        <option value="/user_login_forgot_pass_email_sent">/user_login_forgot_pass_email_sent
        </option>
        <option value="/user_login_forgot_pass_input_email">/user_login_forgot_pass_input_email
        </option>
        <option value="/user_login_register_password">/user_login_register_password</option>
        <option value="/user_login_register_username">/user_login_register_username</option>
        <option value="/user_login_register_email">/user_login_register_email</option>
        <option value="/user_login_interest_choose">/user_login_interest_choose</option>
        <option value="/user_login_bind_email">/user_login_bind_email</option>
        <option value="/post_pic_detail">/post_pic_detail</option>
        <option value="/account_appraisal_detail">/account_appraisal_detail</option>
        <option value="/account_content_deleted">/account_content_deleted</option>
        <option value="/topic_detail">/topic_detail</option>
        <option value="/hashtag_detail">/hashtag_detail</option>
        <option value="/video_details">/video_details</option>
        <option value="/post_video_detail">/post_video_detail</option>
        <option value="/account_modify_user_name">/account_modify_user_name</option>
        <option value="/account_profile_edit">/account_profile_edit</option>
        <option value="/account_my_message">/account_my_message</option>
        <option value="/account_activity_message">/account_activity_message</option>
        <option value="/account_system_message">/account_system_message</option>
        <option value="/account_message_like">/account_message_like</option>
        <option value="/account_message_follow">/account_message_follow</option>
        <option value="/setting_instagram_oauth">/setting_instagram_oauth</option>
        <option value="/setting_more">/setting_more</option>
        <option value="/setting">/setting</option>
        <option value="/setting_my_account">/setting_my_account</option>
        <option value="/setting_privacy_settings">/setting_privacy_settings</option>
        <option value="/setting_privacy_services">/setting_privacy_services</option>
        <option value="/setting_feedback">/setting_feedback</option>
        <option value="/setting_account_management">/setting_account_management</option>
        <option value="/setting_delete_account">/setting_delete_account</option>
        <option value="/setting_delete_account_confirm">/setting_delete_account_confirm</option>
        <option value="/setting_account_bind_email">/setting_account_bind_email</option>
        <option value="/setting_account_verify_email">/setting_account_verify_email</option>
        <option value="/setting_ins_import_medias">/setting_ins_import_medias</option>
        <option value="/dev_console">/dev_console</option>
        <option value="/follow_list">/follow_list</option>
        <option value="/img_2_create_wish_list">/img_2_create_wish_list</option>
        <option value="/wish_list_route">/wish_list_route</option>
        <option value="/christmas_wish_list">/christmas_wish_list</option>
        <option value="/interest_page">/interest_page</option>
        <option value="/brand_page">/brand_page</option>
        <option value="/eos_page">/eos_page</option>
        <option value="/recommend_stores_page">/recommend_stores_page</option>
        <option value="/stores_manage_page">/stores_manage_page</option>
        <option value="/stores_link_page">/stores_link_page</option>
    </select>
    <button id="test_toAppNamed" class="button button2">test_toNamed</button>
</div>
<div style="word-break:break-all">
    <input id="test_accWebPages_value" type="text" value="https://flutter.dev">
    <button id="test_accWebPages" class="button button1">
        test_accWebPages
    </button>
    <button id="test_toWebPage" class="button button1">test_toWebPage</button>
</div>

<hr>
<h3>-skJsBridgeV1-test-cases-</h3>
</body>

<script type="module">
import * as skJsBridgeV2 from './JSBridge.js'


document.getElementById("common_result").innerHTML = "User-agent is: " + navigator.userAgent;

document.querySelector('#registerHandler').addEventListener('click', function onClick(){
    // 调用App弹出Toast提示
    skJsBridgeV2.default.registerHandler('getProductCollectionStatus', function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_toast').addEventListener('click', function onClick(){
    // 调用App弹出Toast提示
    skJsBridgeV2.default.callHandler('toast', '123', function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_getAppToken').addEventListener('click', function onClick(){
    // 调用App，获取appToken
    skJsBridgeV2.default.callHandler('getAppToken', '123', function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_tryBack').addEventListener('click', function onClick(){
    // 调用App，退出WebView，
    //  navPop: true, 强制退出；（不是这个值时，App会判断浏览器历史记录有没有前一页面，有则会钱前一页面，没有则退出WebView）
    skJsBridgeV2.default.callHandler('tryBack', {navPop:true}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_showTitleBar').addEventListener('click', function onClick(){
    // 调用App，显示｜隐藏标题栏，
    // show:true，显示
    skJsBridgeV2.default.callHandler('showTitleBar', {show:true}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_hideTitleBar').addEventListener('click', function onClick(){
    // 调用App，显示｜隐藏标题栏，
    // show:false, 隐藏
    skJsBridgeV2.default.callHandler('showTitleBar', {show:false}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_share_good').addEventListener('click', function onClick(){
    // 调用App，分享弹窗，
    // urlLink: 要分享的链接
    skJsBridgeV2.default.callHandler('appShare', {urlLink:"http://www.baidu.com"}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_share_bad').addEventListener('click', function onClick(){
    // 调用App，分享弹窗，
    // urlLink: 不传，无法唤起功能
    skJsBridgeV2.default.callHandler('appShare', {urlLink:""}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_getAccountInfo').addEventListener('click', function onClick(){
    // 调用App，获取账户信息
    skJsBridgeV2.default.callHandler('getAccountInfo', {}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_clearCache').addEventListener('click', function onClick(){
    // 调用App，清理缓存
    /// Clears all caches used by the WebView.
    ///
    /// The following caches are cleared:
    ///	1. Browser HTTP Cache.
    ///	2. [Cache API](https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/cache-api)
    ///    caches. Service workers tend to use this cache.
    ///	3. Application cache.
    skJsBridgeV2.default.callHandler('clearCache', {}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_clearLocalStorage').addEventListener('click', function onClick(){
    // 调用App，清理本地存储
    // Clears the local storage used by the WebView.
    skJsBridgeV2.default.callHandler('clearLocalStorage', {}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_clearCacheAndLocalStorage').addEventListener('click', function onClick(){
    // clearCache & clearLocalStorage
    skJsBridgeV2.default.callHandler('clearCacheAndLocalStorage', {}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_toAppNamed').addEventListener('click', function onClick(){
    var target = document.querySelector('#test_toAppNamed_target').value;
    // 调用App，跳转到App指定页面
    skJsBridgeV2.default.callHandler('toAppNamed', {route:target}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_accWebPages').addEventListener('click', function onClick(){
    var target = document.querySelector('#test_accWebPages_value').value;
    // 调用App，对url进行缓存，方便后面打开时加速显示
    skJsBridgeV2.default.callHandler('accWebPages', {WebPages:[target]}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_collectProductListV2').addEventListener('click', function onClick(){
    // 调用App，收藏接口
    // 参数说明：
    // wishlistId： "心愿单Id, 不传代表收藏到item"
    // id：type=1时为商品id,type=2时为标品id
    // type：1商品；2标品
    skJsBridgeV2.default.callHandler('collectProductListV2'
        , {
            items:[
                {
                    id:'24924a90e53539fcdf8d086c604925c4',
                    type:1
                }],
            wishlistId:''
        }
        , function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})


document.querySelector('#test_cancelCollectProductListV2').addEventListener('click', function onClick(){
    // 调用App，取消收藏接口
    // 参数说明：
    // id：type=1时为商品id,type=2时为标品id
    // type：1商品；2标品
    skJsBridgeV2.default.callHandler('cancelCollectProductListV2'
        , {
            items:[
                {
                    id:'24924a90e53539fcdf8d086c604925c4',
                    type:1
                }],
        }
        , function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})


document.querySelector('#test_toWebPage').addEventListener('click', function onClick(){
    // 调用App，打开webview，到指定的H5页面
    var target = document.querySelector('#test_accWebPages_value').value; // https://flutter.dev
    skJsBridgeV2.default.callHandler('toAppNamed', {
            route:'/h5?url='+encodeURIComponent(target),
        }, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})


document.querySelector('#test_showLoadingAnim').addEventListener('click', function onClick(){
    // 调用App，显示装载中动画
    // show:true，显示
    skJsBridgeV2.default.callHandler('showLoadingAnim', {show:true}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

document.querySelector('#test_hideLoadingAnim').addEventListener('click', function onClick(){
    // 调用App，隐藏装载中动画
    // show:false，隐藏
    skJsBridgeV2.default.callHandler('showLoadingAnim', {show:false}, function onAppResponse(data){
        document.getElementById("common_result").innerHTML = data;
    });
})

</script>
</html>